<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<spring:hasBindErrors name="command"/><form:errors path="command"/>

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
var idchk=0;

// 아이디 중복 체크 this.form, 12
function check_id(fdata,maxLength){
	if (!fdata.m_id.value) {
		alert('아이디를 입력해주세요');fdata.m_id.focus();idchk=0;return;
		
			
	} else if (maxLength < txtRsLength(fdata.m_id.value)) {
		alert(maxLength + 'Byte 까지만 입력할 수 있습니다.\n(한글은 2Byte 입니다.)');
		fdata.m_id.value = txtRsCut(fdata.m_id.value,maxLength);
		return;
	} else if (chkValue(fdata.m_id.value)){
	/////////////////////////////
		$(document).ready(function() {
			$.ajax('ChkJoin.do?set=m_id&value='+fdata.m_id.value, {
				cache:false,
				success : function(data) {
										
					if(data == 1){
						alert('존재하는 아이디입니다.');idchk=0;return;
					} else if (data == 2 ) {
						alert('아이디를 입력하고 실행해 주세요.');idchk=0;return;
					} else {
						alert('사용 가능한 아이디입니다.');idchk=1;							
					}// end idckk
				}
			});// end jqury
		});
	/////////////////////////////
	}// end else if
}




// 초기화 함수
function idchknull(){idchk=0;}

// 첫글자 A~Z, a~z + 나머지는 A~Z, a~z, 1~0 체크
function chkValue(text){ 
	if (text == undefined || text == null || text.trim() == "") {alert('ID는 영어만 가능합니다.');
	} else {
		if (typeof(text) != "string"){ alert('문자열만 체크할 수 있습니다.');
		} else {
			var _chk = true; _sp = /\s+/;var msg="";
			//첫글자는 여기서 일단 체크
				var ch = text[0].charCodeAt();
				var pt = (ch >= 0x61 && ch <= 0x7A) || (ch >= 0x41 && ch <= 0x5A)
				_chk = _chk && pt
				if(!_chk) {msg = "첫 글자는 영어 대~소문자만 가능합니다.\n";}
				
			//두번째부터는 숫자도 들어간다.
			for(var i=1; i<text.length;i++){
				ch = text[i].charCodeAt();
				pt = ((ch >= 0x61 && ch <= 0x7A) || (ch >= 0x41 && ch <= 0x5A) || (ch >= 0x30 && ch <= 0x39))
				//alert(text[i] + " = " + pt);
				_chk = _chk && pt
			}//end for//alert("최종결과 " + _chk);
			if(!_chk) {
				msg = msg + "영어 대,소문자와 숫자의 조합으로 만들어주세요.";
				alert(msg);
			}
			return _chk;
		}//end else - if
	}//end if

}
// 글자 길이 반환 : 한글 및 특수문자 UTF-8 은 2글자로
function txtRsLength(input){
	var byteLength = 0;
	
	for (var inx = 0; inx < input.length; inx++) {
        var oneChar = escape(input.charAt(inx));
        if (oneChar.length == 1) {
            byteLength++;
        } else if (oneChar.indexOf("%u") != -1) {
            byteLength += 2;
        } else if (oneChar.indexOf("%") != -1) {
            byteLength += oneChar.length / 3;
        }
    }//alert(byteLength);
	return byteLength;
}

// 입력제한. 아스키코드를 이용하여 처리한다. (escape)
// 문자열과 잘라야 하는 길이를 받아온다. 그 값으로 글자길이 반환을 통해 재정리.
function txtRsCut(txt,cut){
	var byteLength = 0;var rs = "";
	
	for (var inx = 0; inx < txt.length; inx++) {
        var oneChar = escape(txt.charAt(inx));
        if (oneChar.length == 1) {
            byteLength++;
        } else if (oneChar.indexOf("%u") != -1) {
            byteLength += 2;
        } else if (oneChar.indexOf("%") != -1) {
            byteLength += oneChar.length / 3;
        }
        if (byteLength <= cut)
        {rs = rs + unescape(oneChar);}
    }//alert(rs);
    return rs;
}


var emailck=0;

//email 중복 체크 this.form, 12
function check_email(fdata,maxLength){
	if (!fdata.m_email.value) {
		alert('이메일을 입력해주세요');fdata.m_email.focus();emailck=0;return;
		
			
	} else if (maxLength < txtRsLength(fdata.m_email.value)) {
		alert(maxLength + 'Byte 까지만 입력할 수 있습니다.\n(한글은 2Byte 입니다.)');
		fdata.m_email.value = txtRsCut(fdata.m_email.value,maxLength);
		return;
	} else if (fdata.m_email.value){
	/////////////////////////////
		$(document).ready(function() {
			$.ajax('ChkEmail.do?set=m_email&value='+fdata.m_email.value, {
				cache:false,
				success : function(data) {
										
					if(data == 1){
						alert('존재하는 EMAIL입니다.');emailck=0;return;
					} else if (data == 2 ) {
						alert('Email을 입력하고 실행해 주세요.');emailck=0;return;
					} else {
						alert('사용 가능한 Email입니다.');emailck=1;							
					}// end idckk
				}
			});// end jqury
		});
	/////////////////////////////
	}// end else if
}




function submitCheck(fdata){
/* 	var length = 12;
	var email = 40; */
	// 아이디 : fs.id.value,length
	//메일 : c(fs.id.value, email);
 	if (!fdata.m_id.value){alert('아이디를 입력해주세요..');fdata.m_id.focus();return;} 
 	else if(idchk == 0){alert('아이디 체크를 진행해 주세요.');return;}
 	else if (!fdata.m_password.value){alert('비밀번호를 입력해주세요..');fdata.m_password.focus();return;}		
  	else if (!fdata.pchk.value){alert('비밀번호확인란을 입력해주세요..');fdata.pchk.focus();return;}
  	else if (fdata.m_password.value != fdata.pchk.value  ){alert('비밀번호랑 체크가 일치않습니다. 다시 확인하고 입력해주세요..');fs.m_password.focus();return;}
 	else if (!fdata.m_name.value){alert('이름을 입력해주세요..');fdata.m_name.focus();return;}
	else if (!fdata.m_jumin.value){alert('생년월일 8자를 입력해주세요..');fdata.m_jumin.focus();return;}
	else if (!fdata.m_phone.value){alert('전화번호를 입력해주세요..');fdata.m_phone.focus();return;}
	else if (!fdata.m_address.value){alert('주소를 입력해주세요..');fdata.m_address.focus();return;}
	else if (!fdata.m_email.value){alert('메일을 입력해주세요..');fdata.m_email.focus();return;} 
	else if (emailck == 0){alert('메일체크를 진행해주세요..');return;}
 	
alert('회원 가입(로그인해주세요)!!');
	
	fdata.submit();
}
</script>
<div style="float: bottom;" align="center">
		<img src="<%=request.getContextPath() %>/image/memberjoin.jpg">
</div>
<table align="center" border="0">
<tr><td>
<div style="width: 430px; padding : 5px 5px 5px 5px ;border:1px solid;">

<form action="insert.do" method="post" name="joinform" <%-- onsubmit="return submitCheck(this)" --%>>
<ul class="join">
	<li><label class="Join">아이디</label>
		<input type="text" name="m_id" id="m_id" autofocus="autofocus" value="${command.m_id}" onkeypress="idchknull()" maxlength="12">
		<input type="button" value="아이디 중복 체크" onclick="check_id(this.form,12)" style="height:22px;width: 120px;">
		<br>
	</li>
	<hr>
	<li><label class="Join">비밀번호</label>
		<input type="password" name="m_password" id="m_password" value="${command.m_password}" maxlength="12" showPassword="false">
		<br>
	</li>
	<li><label class="Join">비밀번호 확인</label>
		<input type="password" name="pchk" id="pchk" maxlength="12">
	</li>
	<hr>
	<li><label class="Join">이름</label>
		<input type="text" name="m_name" id="m_name" value="${command.m_name}" maxlength="12">
		<br>
	</li>
	<li><label class="Join">생년월일</label>
		<input type="text" name="m_jumin" id="m_jumin" value="${command.m_jumin}" maxlength="8">
		<br>
	</li>
	<li><label class="Join">전화번호</label>
		<input type="text" name="m_phone" id="m_phone" value="${command.m_phone}" maxlength="11">
		<br>
	</li>	
	<li><label class="Join">주소</label>
		<input type="text" name="m_address" id="m_address" value="${command.m_address}" maxlength="50">
		<br>
	</li>	
		
	<li><label class="Join">이메일</label>
		<input type="text" name="m_email" id="m_email autofocus="autofocus" value="${command.m_email}" maxlength="20">
		<input type="button" value="이메일 중복 체크" onclick="check_email(this.form,12)" style="height:22px;width: 120px;">
		<br>
		
	</li>
	<hr>
	<ul style="text-align: center;">
		<input type="button" value="돌아가기" onclick="history.go(-1)" style="height:24px;width: 120px; ">
		<input type="reset" value="다시 입력하기" style="height:24px;width: 120px;">
		<input type="button" value="가입하기" style="height:24px;width: 120px;" onclick="submitCheck(this.form)">
	</ul>
</ul>
</form>
</div>
</td>
</tr>
</table>